<template>
	<view classs="detail">
		<view class="fixbg" :style="{'background-image':`url(${songDetail.al.picUrl})`}"></view>
		<MicHid :title="songDetail.name" :icon="true" color="white"></MicHid>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true" >
				<view class="detail-play"@tap="handToPlay">
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run':isPlayRotate}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform: 'translateY('+ -(lyricIndex-1) * 82+'rpx)'}">
						<view class="detail-lyric-item" :class="{'active':lyricIndex == index}" v-for="(item,index) in songLyric" :key="index">{{item.lyric}}</view>
						
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的也听</view>
					<view class="detail-like-item"  v-for="(item,index) in songSimi" :key="item.id"@tap="handToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl"></image>
						</view>
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<view>
								<image v-if="item.privilege.flg>60 && item.privilege.flg < 70" src="../../static/sq.png" mode=""></image>
								<image v-if="item.privilege.maxbr==999000" src="../../static/vip.png" mode=""></image>
								{{item.album.artists[0].name}} - {{item.name}}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="item.id">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl"></image>
						</view>
						<view class="detail-comment-conent">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user.nickname}}</view>
									<view>{{item.time | formatTime}}</view>
								</view>
								<view class="detail-comment-like">{{item.likedCount | formatCount}} 
									<text class="iconfont icon-zan"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{item.content}}</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MicHid from '../../components/MicHid/MicHid.vue'
	import {songDetail,songUrl,songComment,songLyric,songSimi} from '../../comm/api.js'
	export default {
		data() {
			return {
				songDetail:{
					al:{}
				},
				songSimi:[],
				songComment: [],
				songLyric:[],
				lyricIndex: 0,
				iconPlay: 'icon-zanting',
				isPlayRotate: true,
				timer:'' ,
				isLoading: true
			}
		},
		methods: {
			getMusic(songId){
				this.$store.commit('NEXT_ID',songId)
				uni.showLoading()
				this.isLoading=true
				Promise.all([songDetail(songId),songSimi(songId),songComment(songId),songLyric(songId),songUrl(songId)]).then(res=>{
					console.log(res)
					if(res[0][1].data.code=='200'){
						this.songDetail = res[0][1].data.songs[0];
					}
					if(res[1][1].data.code=="200"){
						this.songSimi = res[1][1].data.songs;
					}
					if(res[2][1].data.code=="200"){
						this.songComment = res[2][1].data.hotComments
					}
					if(res[3][1].data.code=="200"){
						let lyric = res[3][1].data.lrc.lyric;
						console.log(lyric);
						let re = /\[([^\]]+)\]([^\[]+)/g;
						var result = [];
						lyric.replace(re,($0,$1,$2)=>{
							result.push({'time':this.formatTimeTosec($1),'lyric': $2})
						})
						this.songLyric = result
						console.log(result)
					}
					if(res[4][1].data.code=="200"){
						// #ifdef MP-WEIXIN
							this.bgAudioMannager = uni.getBackgroundAudioManager();
							this.bgAudioMannager.title=this.songDetail.name;
						// #endif
						
						// #ifdef H5
							if(!this.bgAudioMannager){
								this.bgAudioMannager = uni.createInnerAudioContext();
							}
							this.iconPlay = 'icon-bofang1'
							this.isPlayRotate = false;
						// #endif
						
						
						this.bgAudioMannager.src = res[4][1].data.data[0].url || '';
						this.listenLryicIndex();
						this.bgAudioMannager.onPlay(()=>{
							this.iconPlay = 'icon-zanting';
							this.isPlayRotate = true;
							this.listenLryicIndex();
						})
						this.bgAudioMannager.onPause(()=>{
							this.iconPlay = 'icon-bofang1';
							this.isPlayRotate = false;
							this.cancelLyicIndex();
						})
						this.bgAudioMannager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
					}
					this.isLoading = false;
					uni.hideLoading()
				})
			},
			formatTimeTosec(value){
				let arr = value.split(':')
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			handToPlay(){
				if(this.bgAudioMannager.paused){
					this.bgAudioMannager.play();
				}else {
					this.bgAudioMannager.pause();
				}
			},
			listenLryicIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					this.songLyric.forEach((i,index)=>{
						if(this.bgAudioMannager.currentTime>this.songLyric[this.songLyric.length-1]){
							this.lyricIndex = this.songLyric.length-1
						}
						if(this.bgAudioMannager.currentTime > this.songLyric[index].time && this.bgAudioMannager.currentTime< this.songLyric[index+1].time){
							this.lyricIndex = index
						}
					})
				},500)
			},
			cancelLyicIndex(){
				clearInterval(this.timer)
			},
			handToSimi(songId){
				this.getMusic(songId)
			}
		},
		onLoad(e){
			console.log(e.songid)
			this.getMusic(e.songid) 
		},
		onUnload(){
			this.cancelLyicIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
			
		},
		onHide(){
			this.cancelLyicIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
		},
		components:{
			MicHid
		}
	}
</script>

<style scoped>
.detail-play{
	width: 580rpx;
	height: 580rpx;
	background: url(~@/static/play.png);
	background-size: cover;
	margin: 214rpx auto 0 auto;
	position: relative;
}
.detail-play image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	animation:  10s linear move infinite;
	animation-play-state: paused;
}
.detail-play .detail-play-run{animation-play-state: running;}
@keyframes move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detail-play text{
	width: 100rpx;
	height: 100rpx;
	font-size: 100rpx;
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
.detail-play view{
	width: 230rpx;
	height: 360rpx;
	background: url(~@/static/zhiz.png);
	position: absolute;
	left:0;
	right: 0;
	top:-170rpx;
	left: 180rpx;
	margin: auto;
	background-size:cover;
	
}
.detail-lyric{
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: rgba(255,255,255,.5)
}
.detail-lyric-wrap{
	transition: .2s;
}
.detail-lyric-item{
	height: 82rpx;
	
}
.detail-lyric-item.active{
	color: #fff
}
.detail-like{
	margin:0 30rpx;
}
.detail-like-head{
	font-size: 36rpx;
	color: #fff;
	margin: 50rpx 0;
}
.detail-like-item{
	display: flex;
	align-items: center;
	margin-bottom: 28rpx;
}
.detail-like-img{
	width: 82rpx;
	height: 82rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.detail-like-img image{
	width: 100%;
	height: 100%;
}
.detail-like-song{
	flex: 1;
	color: #c6c2bf;
}
.detail-like-song view:nth-child(1){
	font-size: 28rpx;
	color: white;
	margin-bottom: 12rpx;
}
.detail-like-song view:nth-child(2){
	font-size: 22rpx;
}
.detail-like-song image{
	width: 26rpx;
	height: 20rpx;
	margin-right: 10rpx;
}
.detail-like-item text{
	font-size: 50rpx;
	color: #c6c2bf;
}

.detail-comment{
	margin: 0 30rpx;
	
}
.detail-comment-head{
	font-size: 36rpx;
	color: white;
	margin: 50rpx 0;
}
.detail-comment-item{
	margin-bottom: 28rpx;
	display: flex;
}
.detail-comment-img{
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18rpx;
	flex-shrink: 0;
}
.detail-comment-item image{
	width: 100%;
	height: 100%
}
.detail-comment-content{
	flex-grow: 1;
	color: #cbcacf;
}
.detail-comment-title{
	display: flex;
	justify-content: space-between;
}
.detail-comment-name{
	
}
.detail-comment-name view:nth-child(1){
	font-size: 26rpx;
	
}
.detail-comment-name view:nth-child(2){
	font-size: 20rpx;
}
.detail-comment-like{
	font-size: 28rpx;
}
.detail-comment-text{
	font-size: 28rpx;
	line-height: 40rpx;
	color: white;
	margin-top: 20rpx;
	border-bottom: 1px solid  #e0e0e0;
	padding-bottom: 40rpx;
}


</style>
